<template>
    <el-header class="top-nav">
      <div class="top-nav-content">
        <!-- 用户信息展示 -->
        <div class="user-info">
          <span class="username">Admin</span>
        </div>
        <!-- 退出登录按钮 -->
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <i class="el-icon-more"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
  </template>

  <script>
  import { ElHeader, ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon, ElMessage } from 'element-plus';

  export default {
    name: 'TopNavbar',
    components: {
      ElHeader,
      ElDropdown,
      ElDropdownMenu,
      ElDropdownItem,
      ElIcon
    },
    methods: {
      handleCommand(command) {
        if (command === 'logout') {
          this.logout();
        }
      },
      logout() {
        sessionStorage.removeItem("token");
        sessionStorage.removeItem("studentId");
        ElMessage.success('退出登录成功');
        this.$router.push('/homepage');
      }
    }
  };
  </script>

  <style scoped>
  .top-nav {
    background-color: #ffffff; /* 导航栏背景色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 导航栏阴影 */
    padding: 0 20px;
    height: 60px; /* 导航栏高度 */
    line-height: 60px; /* 文字垂直居中 */
    display: flex;
    align-items: center;
    color: #333;
  }

  .top-nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .user-info {
    font-size: 16px; /* 用户信息字体大小 */
  }

  .username {
    font-weight: bold; /* 用户名加粗 */
    margin-left: 5px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }

  .el-icon-more {
    font-size: 18px; /* 更多图标大小 */
  }
  </style>
